import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Platform,
    Switch,
    ViewPropTypes
} from 'react-native';

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../config/icoMoonConfig.json';
const Icon = createIconSetFromIcoMoon(icoMoonConfig);
import colors from '../config/colors';

const propTypes = {
  title: PropTypes.string, // cell标题文字
  isSwitch: PropTypes.bool, // 是否展示开关
  isShowArrow: PropTypes.bool, // 是否展示开关
  rightTitle: PropTypes.string, //cell右侧标题
  route: PropTypes.any,
  onPressHandler: PropTypes.func,
  containerStyle: ViewPropTypes.style
};

const NavCell = ({
  title,
  isSwitch,
  rightTitle,
  route,
  isShowArrow,
  containerStyle,
  onPressHandler
}) => {
  // cell右侧指示图标视图
  const renderRightView = () => {
      return(
          <View style={{flexDirection:'row',alignItems:'center'}}>
              {renderRightTitle()}
              {renderRightArrowView()}
          </View>
      )
  };

  const renderRightArrowView = () => {
      if (isShowArrow) {
          return(
            <Icon name="more" size={24} />
          )
      }
  }


  // cell右侧标题视图
  const renderRightTitle = () => {
      if(rightTitle.length > 0){
          return(
              <Text style={{color:'gray',marginRight:0}}>{rightTitle}</Text>
          )
      }
  };

  return (
      <TouchableOpacity onPress={() => onPressHandler && onPressHandler(route)}>
          <View style={[styles.container, containerStyle && containerStyle]}>
              <Text>{title}</Text>
              {renderRightView()}
          </View>
      </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        height: 40,
        flexDirection: 'row',
        justifyContent:  'space-between',
        // 垂直居中
        alignItems: 'center',
        paddingLeft: 10,
        paddingRight: 10,
    },
});

NavCell.propTypes = propTypes;

NavCell.defaultProps = {
  title:'', // cell标题文字
  isSwitch:false, // 是否展示开关
  isShowArrow: true,
  rightTitle:'' //cell右侧标题
};

// 输出
export default NavCell;
